<template>
  <div class="yjcp">
    <ul>
      <!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 -->
      <li v-for="(item,index) in list" class="lii" :key="index">
        <img :src="require('@/assets/yjx/'+item.img)" alt="">
      </li>
    </ul>
    <Dibu></Dibu>
  </div>
</template>
 
<script>
import Dibu from '../../../components/yjx/dibu.vue'
export default {
  name: "vueName",
  data() {
    return {
      list:[
      {
        img:'q1.jpg'
      },
      {
        img:'q2.jpg'
      },
      {
        img:'q3.jpg'
      },
      {
        img:'q4.jpg'
      },
      ]
    }
  },
  components:{
    Dibu,
  }
};
</script>
 
<style scoped lang = "scss">
.yjcp{
    padding-top: 100px;
    ul{
        width: 100%;
        height: 500px;
        display: flex;
        .lii{
          width: 100px;
          height: 100%;
          img{
            width: 100%;
            height: 100%;
          }
        }
        
    }
}
.lii:hover{
  width: 800px !important;
}
</style>